<script setup lang="ts">
import { ref, reactive } from "vue"
import { User, Lock } from "@element-plus/icons-vue"
import useUserStore from "@/store/modules/user.ts"
import setting from "@/setting.ts"
import { ElNotification } from "element-plus";
import {useRouter} from "vue-router"
import type{ loginFormType } from "@/api/types/loginType";
import {UserRules} from '@/common/rules.ts'
// 表单实例
const loginFromRef = ref()
const useStoreUser = useUserStore()
const $router = useRouter()
// 登陆表单内容
const loginParams = reactive<loginFormType>({
  username: "admin",
  password: "Admin1.",
})

// 控制提交请求加载动画
let loading = ref<Boolean>(false)
// 表单校验规则
const loginRules = {...UserRules}

// 提交数据
const save = async () => {
  // 处理表单校验拦截阻塞
  await loginFromRef.value.validate()
  try {
    await useStoreUser.useLogin(loginParams)
    loading.value = true  
    $router.push('/')
    ElNotification({
        type: "success",
        message: "登陆成功!",
    })
  } catch (error) {
    ElNotification({
        type: "error",
        message: (error as Error).message,
    })
  }
  
}

// 重置数据
const reset = async () => {
  await loginFromRef.value.resetFields()
}
</script>

<template>
  <el-container>
    <el-main>
      <div class="loginUrl"></div>
    </el-main>
    <!-- 登陆区域 -->
    <el-aside width="35%">
      <el-form :model="loginParams" ref="loginFromRef" :rules="loginRules">
        <h2>Hello</h2>
        <h1>{{ setting.title }}</h1>
        <el-form-item prop="username">
          <el-input
            v-model="loginParams.username"
            type="text"
            :prefix-icon="User"
            size="large"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginParams.password"
            type="password"
            show-password
            :prefix-icon="Lock"
            size="large"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="save" :loading="!!loading" type="primary"
            >登陆</el-button
          >
          <el-button @click="reset" type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </el-aside>
  </el-container>
</template>

<style scoped lang="scss">
.el-container {
  height: 100vh;

  .el-main {
    position: relative;
    background-color: $layout_1_bg;
    .loginUrl {
      width: 500px;
      height: 500px;
      background: url("@/assets/svg/login.svg") no-repeat;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .el-aside {
    padding: 0px 50px;
    background-color: $layout_2_bg;

    .el-form {
      height: 200px;
      position: relative;
      top: 40%;

      & > * {
        margin: 20px 0px;
      }

      h2 {
        font-size: 30px;
        font-weight: bold;
        color: #184657;
      }

      h1 {
        font-size: 18px;
        color: #184657;
      }

      .el-button:first-child {
        background-color: #40b093;
        border-color: #40b093;
      }
    }
  }
}
</style>
